.state-badge-set {
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;

  &__badge {
    font-size: 27px;
    font-weight: bold;
    margin: 7px 7px 0 7px;
    padding: 7px;
    text-transform: uppercase;
    border: solid 2px;
    display: none;

    &--reconcile, &--accepted, &--allowed {
      color: #4CAF50;
      border-color: #4CAF50;
    }

    &--incident {
      color: $caution-color;
      border-color: $caution-color;
    }

    &--to-reconcile, &--forbidden {
      color: #f44336;
      border-color: #f44336;
    }
  }

  &--reconcile &__badge--reconcile,
  &--incident &__badge--incident,
  &--to-reconcile &__badge--to-reconcile,
  &--accepted &__badge--accepted,
  &--allowed &__badge--allowed,
  &--forbidden &__badge--forbidden {
    display: block;
  }
}
